<template>
    <div class="btns">
        <ul>
            <li class="btnOne" v-for = "(item, index) of btnList" :key="index">
                <div class="btnName lf" :class="item.backG">{{item.name}}</div>
                <div class="btn lf" @click="handleBtnclick(index, item.seen ,item.level)" :class="{onOffActive :  item.seen}">
                    <div class="onOff" :class="{ onOffG :  item.seen }"></div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name: 'TypeControl',
    data(){
        return{
            isOnOff : false,
            isIndex : -1,
            btnList: [
                {name:'气象', backG : 'one', seen: false, level: '-I-'},
                {name:'其他', backG : 'two', seen: false, level: '-II-'},
            ]
        }
    },
    methods: {
        handleBtnclick(index,level){
            this.btnList[index].seen = !this.btnList[index].seen
            //隐藏
            if(this.btnList[index].seen){
                console.log(this.$store.state.model);
                if(index==0){
                    for(var i = 0;i<this.$store.state.model.length;i++){
                        if(this.$store.state.model[i]._name.slice(-2)=='气象'){
                            this.$store.state.model[i].show=false;
                        }
                    }  
                }
                if(index==1){
                    for(var i = 0;i<this.$store.state.model.length;i++){
                        if(this.$store.state.model[i]._name.slice(-2)=='其他'){
                            this.$store.state.model[i].show=false;
                        }
                    }  
                }
            }else{
                if(index==0){
                    for(var i = 0;i<this.$store.state.model.length;i++){
                        if(this.$store.state.model[i]._name.slice(-2)=='气象'){
                            this.$store.state.model[i].show=true;
                        }
                    }  
                }
                if(index==1){
                    for(var i = 0;i<this.$store.state.model.length;i++){
                        if(this.$store.state.model[i]._name.slice(-2)=='其他'){
                            this.$store.state.model[i].show=true;
                        }
                    }  
                }
            }
             
       }
    }
}
</script>
<style lang="stylus" scoped> 
    @import '../../../assets/styles/varibles.styl'
    .btns
        position:absolute
        z-index:1
        left:0.26rem
        top:7.96vh
        font-size:.14rem
        color:white
        ul
            li
                margin-bottom:7px
                height: 19px
                .btnName
                    width:58px
                    text-align :center
                    line-height:19px
                .one
                    background:  $bg1
                .two
                    background:  $bg2
                
        .btn
            width: 30px
            height: 14px
            background: #59E1FE
            margin-left:10px
            margin-top:2px
            border-top-left-radius:10px    
            border-top-right-radius:10px 
            border-bottom-left-radius:10px
            border-bottom-right-radius:10px
            overflow :hidden
            .onOff
                width:12px
                height: 12px
                float: right
                background: #fff
                margin-top: 1px
                margin-left: 1px
                margin-right: 1px
                border-radius: 50%
        .onOffActive
            background:#707070
            .onOffG
                float:left
</style>


